<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<title>单价列表</title>
</head>
<body>
    <%-- <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>单价列表</h5>
                    </div>
                   
                    <div class="ibox-content">
                    	<!-- <div class="">
                            <a onclick="" href="javascript:void(0);" class="btn btn-primary "><i class="glyphicon glyphicon-plus" aria-hidden="true">添加单价</i></a>
                        </div> -->
                        <table class="table table-striped table-bordered table-hover dataTables-example" id="unitable">
                            <thead>
                                <tr>
                                	<th>ID</th>
                                    <th>项目名称</th>
                                    <!-- <th>项目单价</th>
                                    <th>项目详情</th>
                                    <th>项目时间</th>
                                    <th>操作</th> -->
                                </tr>
                            </thead>
                            <tbody>
                            	<c:forEach items="${unitpriceList}" var="unitprice" varStatus="unitpricevar">
                            		<tr class="gradeX">
                            			<td>${unitprice.unitpriceid}</td>
                            			<td>${unitprice.unitpricename}</td>
	                                    <td>${unitprice.unitpricenumber}</td>
	                                    <td>${unitprice.unitpriceabs}</td>
	                                    <td>${unitprice.unitpriceoperatetime}</td>
	                                    <td class="center">
	                                    	<a class="J_menuItem" href="${pageContext.request.contextPath }/Main/unitpriceMan/unitpriceSet.action?id=${unitprice.unitpriceid}"><i class="glyphicon glyphicon-edit" aria-hidden="true">修改</i></a>
	                                    </td>
                                	</tr>
                            	</c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> --%>
    <!-- 动态加载table -->
	<table id="unitpricetab" class="table table-hover"></table>
	
	<div class="modal inmodal fade" id="UnitpriceModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width: 1000px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改项目</h4>
               	</div>
                <div class="modal-body">
                	<input type="hidden" id="unitpriceid"/>
                	<div class="form-group draggable">
                    	<label class="control-label">项目名称：</label>
                        <input type="text" name="unitpricename" id="unitpricename" minlength="5" maxlength="20" class="form-control" placeholder="请输入项目名，字数5-20">
                   	</div>
                    <div class="form-group draggable">
                    	<label class="control-label">项目单价：</label>
                        <input type="text" name="unitpricenumber" onkeyup="num(this)" id="unitpricenumber"  class="form-control" placeholder="请输入项目单价数额，数额大于零">
                    </div>
                    <div class="form-group draggable">
                    	<label class="control-label">项目操作时间：</label>
                        <input type="text" name="unitpriceoperatetime" id="unitpriceoperatetime" minlength="5" maxlength="20" class="form-control" placeholder="描述项目操作时间，如几月几日星期几上午几点，字数5-20">
                    </div>
                    <div class="form-group draggable">
                    	<label class="control-label">项目说明：</label>
                        <textarea name="unitpriceabs" onkeyup="words_deal('unitpriceabs');" id="unitpriceabs" rows="6" minlength="10" maxlength="150" class="form-control" placeholder="请输入单价详情,字数在10-150"></textarea>
                   	</div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="UnitpriceSetSubmit()" id="UnitpriceSetSubmit">提交</button>
           		</div>
           	</div>
        </div>
	</div>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery-confirm.js"></script>
    <script>
        /* $(document).ready(function(){
        	$(".dataTables-example").dataTable();
        }); */
      	//根据窗口调整表格高度
        $(window).resize(function() {
            $('#unitpricetab').bootstrapTable('resetView', {
                height: tableHeight()
            })
        })
        //查询按钮事件
        $('#search_btn').click(function(){
            $('#unitpricetab').bootstrapTable('refresh');
        })
        //tableHeight函数
        function tableHeight(){
            //可以根据自己页面情况进行调整
            return $(window).height();
        }
      	function refreshTab(){
      		$('#unitpricetab').bootstrapTable('refresh');
      	}
      	//生成用户数据
        $('#unitpricetab').bootstrapTable({
            method: 'get',
            contentType: "application/x-www-form-urlencoded",//必须要有！！！！
            url:"${pageContext.request.contextPath}/Main/unitpriceMan/unitpriceListAjax.action",//要请求数据的文件路径
            height:tableHeight(),//高度调整
            striped: true, //是否显示行间隔色
            dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
            //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
            //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
            pageNumber: 1, //初始化加载第一页，默认第一页
            pagination:true,//是否分页
            queryParamsType:'limit',//查询参数组织方式
            queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
                return {//这里的params是table提供的    
                    offset : params.offset,//从数据库第几条记录开始    
                    limit : params.limit,
                    //type:null
                //找多少条    
                };},//请求服务器时所传的参数
            sidePagination:'server',//指定服务器端分页
            pageSize:10,//单页记录数
            pageList:[1,5,10,30,50,100],//分页步进值
            showRefresh:true,//刷新按钮
            showColumns:true,
            clickToSelect: true,//是否启用点击选中行
            toolbarAlign:'right',//工具栏对齐方式
            buttonsAlign:'right',//按钮对齐方式
            toolbar:'#toolbar',//指定工作栏
            columns:[
                {
                    title:'全选',
                    field:'select',
                    //复选框
                    checkbox:true,
                    width:25,
                    align:'center',
                    valign:'middle'
                },
                {
                    title:'项目ID',
                    field:'unitpriceid',
                    visible:true
                },
                {
                    title:'项目名称',
                    field:'unitpricename',
                    sortable:true,
                    formatter:nullChange
                },
                {
                    title:'项目单价',
                    field:'unitpricenumber',
                    sortable:true,
                    formatter:nullChange
                },
                {
                    title:'项目执行时间',
                    field:'unitpriceoperatetime',
                    sortable:true,
                    formatter:nullChange
                },
                {
                    title:'项目详情',
                    field:'unitpriceabs',
                    sortable:true,
                    formatter:nullChange
                },
                {
                    title:'操作',
                    field:'operate',
                    align:'center',
                    //列数据格式化
                    formatter:operateConfirm
                }
            ],
            locale:'zh-CN',//中文支持,
            responseHandler:function(rows){
                //在ajax获取到数据，渲染表格之前，修改数据源
                return rows;
            }
        })
        //对所有空值规格化，null-》未填写
	    function nullChange(value,row,index){
			if(value=='null' || value==''){
				return '未填写'
			}else{
				return value;
			}
		}
      	
      	//操作序列规则化
    	function operateConfirm(value,row,index){
      		var unitpriceid=row.unitpriceid;
      		var unitpricename="'"+row.unitpricename+"'";
      		var unitpricenumber="'"+row.unitpricenumber+"'";
      		var unitpriceoperatetime="'"+row.unitpriceoperatetime+"'";
      		var unitpriceabs="'"+row.unitpriceabs+"'";
    		return '<button class="btn btn-primary" style="height:30px" onclick="Edit('+unitpriceid+','+unitpricename+','+unitpricenumber+','+unitpriceoperatetime+','+unitpriceabs+')">修改</button>&nbsp;&nbsp;<button class="btn btn-warning" style="height:30px" id="delete'+row.unitpriceid+'" onclick="Delete('+row.unitpriceid+')">删除</button>';
    	}
      	//编辑项目
      	function Edit(unitpriceid,unitpricename,unitpricenumber,unitpriceoperatetime,unitpriceabs){
      		//alert("输出："+unitpriceid+unitpricename+unitpricenumber+unitpriceoperatetime+unitpriceabs);
      		$("#unitpriceid").val(unitpriceid);
      		$("#unitpricename").val(unitpricename);
      		$("#unitpricenumber").val(unitpricenumber);
      		$("#unitpriceoperatetime").val(unitpriceoperatetime);
      		$("#unitpriceabs").val(unitpriceabs);
      		$("#UnitpriceModal").modal("show");
      	}
      	//删除项目
      	function Delete(unitpriceid){
      		$.confirm({
    		    title: '提示!',
    		    content: '你确定删除该项目？',
    		    type: 'blue',
    		    typeAnimated: true,
    		    buttons: {
    		    	确定: function () {
    		    		$("#delete"+unitpriceid).html('<i class="fa fa-spinner fa-spin"></i>删除中...');
    		    		$("#delete"+unitpriceid).prop('disabled',true);
    		    		$.ajax({
    		        		type:'post',
    		        		url:"${pageContext.request.contextPath}/Main/unitpriceMan/DeleteUnitprice.action",
    		        		data:"unitpriceid="+unitpriceid,
    		        		async: true,
    		        		success:function(data){
    		        			$("#delete"+unitpriceid).html('删除');
    	    		    		$("#delete"+unitpriceid).prop('disabled',false);
    		        			$.alert(data.msg);
    		        			if(data.code=='100'){
    		        				refreshTab();
    		        			}
    		        		},error:function(request){
    		        			$.alert("向服务器请求失败！");
    		        			$("#delete"+unitpriceid).html('删除');
    	    		    		$("#delete"+unitpriceid).prop('disabled',false);
    		        		}
    		        	})
    		    	},
    				取消: function () {},
    		    }	
    		});
      	}
      	//保存修改数据
      	function UnitpriceSetSubmit(){
      		var unitpriceid = $("#unitpriceid").val();
      		var unitpricename = $("#unitpricename").val();
      		var unitpricenumber = $("#unitpricenumber").val();
      		var unitpriceoperatetime = $("#unitpriceoperatetime").val();
      		var unitpriceabs = $("#unitpriceabs").val();
      		var param = "unitpriceid="+unitpriceid+"&unitpricename="+unitpricename+"&unitpricenumber="+unitpricenumber+"&unitpriceoperatetime="+unitpriceoperatetime+"&unitpriceabs="+unitpriceabs;
      		$.confirm({
    		    title: '提示!',
    		    content: '你确定修改该项目？',
    		    type: 'blue',
    		    typeAnimated: true,
    		    buttons: {
    		    	确定: function () {
    		    		$("#UnitpriceSetSubmit").html('<i class="fa fa-spinner fa-spin"></i>处理中...');
    		    		$("#UnitpriceSetSubmit").prop('disabled',true);
    		    		$.ajax({
    		        		type:'post',
    		        		url:"${pageContext.request.contextPath}/Main/unitpriceMan/unitpriceEditSubmit.action",
    		        		data:param,
    		        		async: true,
    		        		success:function(data){
    		        			$("#UnitpriceSetSubmit").html('提交');
    	    		    		$("#UnitpriceSetSubmit").prop('disabled',false);
    		        			$.alert(data.msg);
    		        			if(data.code=='100'){
    		        				refreshTab();
    		        				$("#UnitpriceModal").modal("hide");
    		        			}
    		        		},error:function(request){
    		        			$.alert("向服务器请求失败！");
    		        			$("#UnitpriceSetSubmit").html('提交');
    	    		    		$("#UnitpriceSetSubmit").prop('disabled',false);
    		        		}
    		        	})
    		    	},
    				取消: function () {},
    		    }	
    		});
      	}
        <%-- function AddUnitPrice(){
        	$.confirm({
    		    title: '新增单价',
    		    boxWidth: '500px',
    		    useBootstrap: false,
    		    content: '' +
    		    '<form action="" role="form">' +
    		    '<div class="form-group">' +
    		    '<label>单价名称</label>' +
    		    '<input type="text" placeholder="单价名称" class="unitpricename form-control" style="width:200px;" required />' +
    		    '</div>' +
    		    '<div class="form-group">' +
    		    '<label>单价金额</label>' +
    		    '<input type="number" placeholder="单价金额" min="1" class="unitpricenumber form-control" style="width:200px;" required />' +
    		    '</div>' +
    		    '<div class="form-group">' +
    		    '<label>单价详情</label>' +
    		    '<textarea type="text" placeholder="单价详情（可不填）" rows="3" class="unitpriceabs form-control" style="width:400px;" required ></textarea>' +
    		    '</div>' +
    		    '</form>',
    		    buttons: {
    		        formSubmit: {
    		            text: '提交',
    		            btnClass: 'btn-blue',
    		            action: function () {
    		            	var hospid = <%=hospID%>;
    		            	var unitpricename = this.$content.find('.unitpricename').val();
    		            	var unitpricenumber = this.$content.find('.unitpricenumber').val();
    		            	var unitpriceabs = this.$content.find('.unitpriceabs').val();
    		            	if(!unitpricename || !unitpricenumber){
    		            		$.alert('填写信息不可为空！');
    		            		return false;
    		            	}
    		            	if(unitpricenumber<=0){
    		                	$.alert('金额数不可小于零！');
    		                	return false;
    		                }
    		            	$.ajax({
	    		        		type:"post",
	    		        		url:"${pageContext.request.contextPath}/Main/unitpriceMan/unitpriceSetSubmit.action",
	    		        		contentType:"application/json;charset=utf-8",
	    		        		async: true,
	    		        		data:'{"unitpricename":"'+unitpricename+'","unitpricenumber":"'+unitpricenumber+'","unitpriceabs":"'+unitpriceabs+'","hospid":"'+hospid+'"}',
	    		        		success:function(data){
	    		        			if(data!=0 || data!=-1){
		    		        			$("#unitable").dataTable().fnAddData([
		    		                		data,
		    		                		unitpricename,
		    		                		unitpricenumber,
		    		                		unitpriceabs,
		    		                		"<a class='J_menuItem' href='${pageContext.request.contextPath }/Main/unitpriceMan/unitpriceSet.action?id="+data+"'><i class='glyphicon glyphicon-edit' aria-hidden='true'>修改</i></a>"
		    		                	])
	    		        			}else{
	    		        				$.alert('新增失败！');
	    		        			}
	    		        		},
	    		        		error:function(request){
	    		        			$.alert("连接异常");
	    		        		}
		                	});
    		            }
    		        },
    		        	关闭: function () {
    		        },
    		    },
    		});
        } --%>
        function num(obj){
        	obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
        	obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
        	obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
        	obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        	obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        }
    	function words_deal(id){
        	var value=$('#'+id).val().length;
	        if(value>150){
	        	var num=$('#'+id).val().substr(0,150);
	        	$('#'+id).val(num);
	        	//alert("超过字数限制，多出的字将被截断！" );
	        }
        }
	</script>
</body>
</html>